<!--供应商模块-->
<template>
    <div>
        <!--    物料供应商抽屉-->
        <make-provide-drawer :visible="prov" @callClosed="handleClosed" @callDataSelected="handleDataReloader"/>
        <el-row justify="center">
            <el-col :span="10">
                <el-form inline v-model="queryForm">
                    <el-form-item label="供应商名称">
                        <el-input v-model="queryForm.nameZh" placeholder="输入要查询的供应商名称"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商类型">
                        <el-select v-model="queryForm.status" style="width:150px" placeholder="请选择供应商类型">
                            <el-option label="全部" :value=-1></el-option>
                            <el-option label="普通供应商" :value=0></el-option>
                            <el-option label="重点供应商" :value=1></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="3">
                <el-button-group>
                    <el-button type="primary" @click="handleQuery">
                        <bar-icon :icon="'select'" :width="15" :height="15" :color="'#ffffff'"/>
                    </el-button>
                    <el-button @click="handleAdd" type="default" plain>
                        <bar-icon :icon="'add'" :width="15" :height="15" :color="'#409eff'"/>
                    </el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-table :data="supporters" stripe style="width: 100%">
            <el-table-column prop="nameZh" label="名称"></el-table-column>
            <el-table-column prop="url" label="官网地址"></el-table-column>
            <el-table-column label="等级" width="150">
                <template #default="scope">
                    <el-tag :type="scope.row.level === 1 ? 'primary' : 'info'">
                        {{ scope.row.level === 1 ? '重点供应商' : '普通供应商' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="score" label="评分" width="100"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template v-slot="{ row }">
                    <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                        {{ row.status === 1 ? '启用' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createtime" label="创建时间" width="180">
                <template #default="scope">
                    {{ scope.row.createtime }}
                </template>
            </el-table-column>

                <el-table-column label="供应数量">
                    <template #default="scope">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            :content="'单位：'+unitName"
                            placement="top"
                        >
                        <el-input-number :min="0" :disabled="scope.row.disabled"  :precision="2" :step="0.1" v-model="scope.row.provideCount"></el-input-number>
                        </el-tooltip>

                    </template>
                </el-table-column>

            <!--        删除操作-->
            <el-table-column label="操作" width="200">
                    <template #default="scope">
                            <el-button-group>
                                <el-button  @click="editData(scope.row)" size="small">编辑</el-button>
                                <el-button  @click="deleteData(scope.row)" type="danger" plain  size="small">删除</el-button>
                            </el-button-group>
                    </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import BarIcon from "@/components/widget/icon/BarIcon.vue";
import supporterAPI from "@/util/request-md/supporter/supporter.js";
import MakeProvideDrawer from "@/components/widget/drawer/MakeProvideDrawer.vue";

export default {
    emits:['bindSupporterCallBack'],
    name: "SupporterDetail.vue",
    components: {MakeProvideDrawer, BarIcon},
    data() {
        return {
            queryForm: {
                nameZh: '',//供应商名称
                status: -1//供应商类型
            },
            prov: false,//物料供应商查询
            page: 1,
            size: 10,
            total: 0,
            matId:-1,
            unitName:'',
            supporters: []
        }
    },
    methods: {
        handleQuery() {

            this.loadMaterialSupporter();
        },
        handleClosed() {

            this.prov = false;
        },
        handleAdd() {
            this.prov = true;
        },
        //修改供应商供货数据
        editData(data){
            //TODO：修改供货数量信息
            if (!data.disabled){
                supporterAPI.updateMatSupporterCount(
                    {
                        idSupport:parseInt(data.idSupport),
                        idMat:this.matId,
                        count:parseFloat(data.provideCount)
                    },
                    (res)=>{
                    if (res.code === 200){
                        this.$message.success("修改成功");
                        this.loadMaterialSupporter();
                    }else{
                        this.$message.error("修改失败");
                    }
                })

            }
            data.disabled = false;
        },
        //数据加载回调
        handleDataReloader(data){
            this.$emit('bindSupporterCallBack',data)
        },
        loadMaterialSupporter() {
            supporterAPI.getSupporterByMat(this.queryForm, this.page, this.size, this.matId, (res) => {
                if (res.code === 200) {
                    this.supporters=[];
                    res.data.forEach(item=>{
                        this.supporters.push({...item,disabled:true})
                    })
                     // = res.data;

                    // this.total=res.data.total;
                }
            })
        },
        deleteData(data){
            //提示是否删除
            this.$confirm('此操作将永久删除该供应记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                supporterAPI.deleteMatSupporter({idSupport:data.idSupport,idMat:this.matId}, (res) => {
                    if (res.code === 200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }
    },
    mounted() {
        this.matId = localStorage.getItem('matId')
        this.unitName = localStorage.getItem('unitName')
        console.log(this.matId,">matId");
        console.log(this.unitName,">unitName");
        this.loadMaterialSupporter();
    }
}
</script>

<style scoped>
.info{
    /*margin-right: 10px;*/
    color: #909399;
}
</style>